<!--
 * @Date: 2023-03-13 13:16:12
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-27 19:46:14
 * @FilePath: \A19\frontend\src\components\Charts\Analysis.vue
-->
<template>
    <div class="container">
        <div class="title ver">
            {{ theCourseInfo?.name }}
        </div>
        <div class="head">
            <div class="block">
                <div class="count">{{ courseInfo?.length }}</div>
                <div class="param">选课人数</div>
            </div>
            <div class="block">
                <div class="count">{{ dayCount}}</div>
                <div class="param">开课天数</div>
            </div>
        </div>
        <div class="line ver">
        <div class="header">
            作业情况统计
        </div>
        <div class="line-chart">
            <LineChart key="home" :nameClicked="nameClicked" :homeworkDate="homeworkDate" :courseinfo="courseInfo" :color="['#8d45f5','#2377d8']"></LineChart>
        </div>
        <div class="bar-chart">
            <BarChart :currentName="currentName" :homeworkDate="homeworkDate" :courseinfo="courseInfo" :color="['#8d45f5','#134790','#2377d8']"></BarChart>
        </div>
       </div>
       <div class="line ver">
        <div class="header">
            考试情况统计
        </div>
        <div class="line-chart">
            <LineChart key="tset" :nameClicked="testNameClicked" :homeworkDate="testDate" :courseinfo="courseInfo" :color="['#d1f7ad','#adf6f7']"></LineChart>
        </div>
        <div class="bar-chart">
            <BarChart :currentName="currentTestName" :homeworkDate="testDate" :courseinfo="courseInfo" :color="['#d1f7ad','#adf6f7','#d3adf7']"></BarChart>
        </div>
       </div>

       <div class="line ver">
        <div class="header">
            实验情况统计
        </div>
        <div class="line-chart">
            <BarChartForExp :exp-info="expInfo" :course-info="courseInfo" :color="['#5b8ff9','#5ad8a6','#74cbed']"></BarChartForExp>
        </div>
        <div class="bar-chart">
            <LineChartForTest :exp-info="expInfo" :course-info="courseInfo" :color="['#6e9cf9']"></LineChartForTest>
        </div>
       </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useClientStore } from '../../pinia/stores/client';
import { users } from '@/shared/types/user';
import { courses } from '../../shared/types/courses';

const route = useRoute()
const router = useRouter()
const { currentCourseId, currentUser, client } = storeToRefs(useClientStore())
const courseId = route.params.courseId as string
const poss = computed(() => {
    return currentUser.value.role === 'teacher'
})
const source = ref<'homework' | 'test' | 'experiment'>('homework')

const homeworkDate = ref<{
    name: string;
    questions: number;
    userHomework: number[];
    _id: string
}[]>()
const testDate = ref<{
    name: string;
    questions: number;
    userHomework: number[];
    _id: string
}[]>()
const expInfo = ref<{
    name:string;
    questions:{ score: number }[],
    userExperiments:{ score:number }[],
    _id:string
}[]>()

const courseInfo = ref<{//students
    _id: string,
    student: users[],
    course: string
}[]>()

const theCourseInfo = ref<courses>()
const dayCount = computed(() =>{
    if(!theCourseInfo.value) return 0
    return Math.floor((new Date().getTime() -  theCourseInfo.value.createdTime.getTime()) / (1000 * 3600 * 24))
})

watchEffect(async () => {
    if (!courseId) {
        ElMessage.error('不存在')
        router.back()
        return
    }
    currentCourseId.value = courseId

    if (true) {
        client.value.callApi('Charts/GetAllData', {
            course: courseId,
            source: 'homework'
        }).then(ret =>{
            if (ret.isSucc) {
                ret.res.datas.forEach((data: {
                    name: string
                    questions: { question: { score: number } }[] | any
                    userHomework: { score: number }[] | any
                    _id: string
                }) => {
                    data.questions = data.questions.reduce((pre: any, cur: any) => {
                        return pre + cur.question.score
                    }, 0)
                    data.userHomework = data.userHomework.map((p: any) => p.score)
                })

                homeworkDate.value = ret.res.datas
                if(homeworkDate.value){
                    if(homeworkDate.value.length > 0){
                        currentName.value = homeworkDate.value[0].name
                    }
                }
            }
        })

        client.value.callApi('Charts/GetAllData', {
            course: courseId,
            source: 'test'
        }).then(ret =>{
            if (ret.isSucc) {
                // console.log(ret.res.datas);
                ret.res.datas.forEach((data: {
                    name: string
                    questions: { question: { score: number } }[] | any
                    userHomework: { score: number }[] | any
                    _id: string
                }) => {
                    data.questions = data.questions.reduce((pre: any, cur: any) => {
                        return pre + cur.question.score
                    }, 0)
                    data.userHomework = data.userHomework.map((p: any) => p.score)
                })

                testDate.value = ret.res.datas
                if(testDate.value){
                    if(testDate.value.length > 0){
                        currentTestName.value = testDate.value[0].name
                    }
                }
            }
        })
    
        client.value.callApi('Charts/GetAllData',{
            course:courseId,
            source:'experiment'
        }).then(ret =>{
            if(ret.isSucc){
                expInfo.value = ret.res.datas
            }
        })
    }
})

const currentName = ref('')
const nameClicked = (name:string) =>{
    currentName.value = name
}
const currentTestName = ref('')
const testNameClicked = (name:string) =>{
    currentTestName.value = name
}

onMounted(async () => {
    if (!courseId) {
        ElMessage.error('不存在')
        router.back()
        return
    }
    currentCourseId.value = courseId

    client.value.callApi('Get/GetCourseInfo',{
        course:courseId
    }).then(ret =>{
        if(ret.isSucc){
            theCourseInfo.value = ret.res.courseInfo
        }
    })

    if(true){
        const ret = await client.value.callApi('Get/GetCourseStus', {
        course: courseId
        })
        if (ret.isSucc) {
            courseInfo.value = ret.res.stus
        }
    }
    else{

    }
})
</script>

<style lang="less" scoped>
.container {
    background-color:#f2f2f2;
    padding: 80px 0;
    padding-bottom: 10px;
    height: 100%;
    width: 100%;
    overflow: auto;
    .title{
        height: 60px;
        width: 100%;
        background-color: white;
        position: fixed;
        top: 0;
        z-index: 10;
        line-height: 60px;
        font-size: 20px;
        font-weight: bold;
        padding: 0 30px;
    }
    .head{
        height: 170px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .block{
            height: 110px;
            width: 145px;
            background-color: white;
            margin: 0 12px;
            border-radius: 20px;
            box-shadow: 1px 1px 1px #0000000a;
            position: relative;
            padding: 0 20px;
            .count{
                height: 70px;
                font-size: 40px;
                padding-top: 25px;
                line-height: 40px;
                font-weight: bold;
            }
            .param{
                height: 40px;
                line-height: 30px;
                font-size: 13px;
                color: #a2a2a2;
            }
        }
    }
    .line{
        position: relative;
        width:100%;
        background-color: white;
        padding: 0px 20px;
        padding-top: 30px;
        height: 500px;
        display: flex;
        margin-bottom: 30px;
        .header{
            position: absolute;
            top:20px;
            font-size: 16px;
            color: #a2a2a2;
        }
        & >div{
            height: 100%;
        }
        .line-chart {
            width: 55%;
        }
        .bar-chart{
            width: 45%;
        }
    }
}
.ver{
    border-bottom: 0.0625rem solid rgb(226, 232, 240);
    border-top: 0.0625rem solid rgb(226, 232, 240);
}
</style>